<template>
  <view>
    <uv-toast ref="uToast"></uv-toast>
    <uv-no-network></uv-no-network>
    <Nav title="我的"></Nav>
    <Header></Header>
    <view class="my">
      <view class="top">
        <view class="avatar">
          <view class="top-left">
            <uv-avatar
                size="50"
            />
            <uv-text
                :text="name"
                color="#fff"
                margin="0 10px"
            ></uv-text>
          </view>
          <view class="top-right">
            <uv-icon
                name="setting"
                color="#fff"
                size="24px"
                @click="settingFn"
            ></uv-icon>
          </view>
        </view>
        <view class="bottom">
          <view class="bottom-top">
            <view class="left">我的订单</view>
          </view>
          <view class="bottom-bottom">
            <view class="box" v-for="(item, index) in list"
                  @click="jumpFn(item.name)"
                  :key="index">
              <uv-image :src="item.img"
                        height="50"
                        width="50"
              ></uv-image>
              <uv-text :text="item.name"
                       align="center"
                       margin="4px auto 0"
              ></uv-text>
            </view>
          </view>
        </view>
      </view>
      <Product></Product>
    </view>
  </view>
</template>

<script setup>
import Header from "@/components/header.vue";
import Nav from "@/components/nav.vue";
import Product from "./product.vue";
import {ref, onMounted} from "vue"
const name = ref('')
const list = ref([
  {
    name: '全部',
    img: '/static/img/all.png'
  },
  {
    name: '待付款',
    img: '/static/img/pay.png'
  },
  {
    name:  '待发货',
    img: '/static/img/result.png'
  },
  {
    name: '待收货',
    img: '/static/img/return.png'
  }
])
const jumpFn = (name) => {
  uni.showLoading({
    title: '加载中...'
  })
  setTimeout(()=>{
    uni.navigateTo({
      url: '/pages/order/order'
    })
  },100)
}
const settingFn = () => {
  uni.navigateTo({
    url: '/pages/setting/setting'
  })
}
onMounted(()=>{
  name.value = uni.getStorageSync('user_name');
})
</script>

<style lang="scss" scoped>
.my {
  height: calc(100vh - 88px);
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  //border: 1px solid red;
  background-color: #f7f7f8;
  &::-webkit-scrollbar {
    display: none;
  }
  .top {
    width: 100%;
    height: 220px;
    background-color: #3c9cff;
    padding: 15px;
    box-sizing: border-box;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    position: relative;
    .avatar {
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: space-between;
      .top-left {
        display: flex;
        color: #FFFFFF;
      }
    }
    .bottom {
      position: absolute;
      bottom: 0;
      width: 90%;
      left: 50%; /* Center horizontally */
      transform: translateX(-50%); /* Adjust position */
      box-sizing: border-box;
      padding: 15px;
      background-color: #FFFFFF;
      border-radius: 10px;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
      margin-top: 15px;
      .bottom-top{
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        .right{
          display: flex;
        }
      }/* Add shadow */
      .bottom-bottom{
        display: flex;
        width: 100%;
        margin-top: 10px;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 20px;
        .box{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 50px;
        }
      }
    }
  }
}
</style>
